<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码第二步</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script src="jquery.js"></script>
    <script>
        window.onload = function(){
            var rate = 3.75;
            var wh = document.body.clientWidth||document.documentElement.clientWidth;
            document.documentElement.style.fontSize = wh/rate +"px";
        }
    </script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .all{
            position:relative;
        }
        .top{
            border-bottom: 0.01rem solid #cccccc;
            text-align: center;
            height:0.4rem;
            font-size: 18px;
            padding-top:0.15rem;
        }
        img{
            width:0.4rem;
        }
        .content{
            margin-left:0.2rem;
            margin-top: 0.2rem;
            margin-right: 0.2rem;
            font-size: 14px;
            border-bottom: 0.01rem solid #ccc;
        }
        .content input{
            padding:0.2rem 0.2rem 0.16rem 0.1rem;
            width:1.3rem;
            background:none;
            border:none;
            font-size:14px;
            color:#ccc;
            outline:none;
        }
        .content #yzmerror{
            color:red;
            font-size:12px;
        }
        .content .res{
            background:#ccc;
            padding:0.08rem;
            margin-top: 0.1rem;
            font-size:14px;
            position:absolute;
            right:0.3rem;
        }
        .next{
            width:3rem;
            margin:0.3rem auto;
            font-size: 14px;
        }
        .next input{
            padding:0.14rem;
            background:#8e8e8e;
            color:#333;
            border-radius:0.4rem;
            border:none;
            width:3rem;
            font-size:14px;
            outline: none;
        }
        .img img{
            position:absolute;
            top:0.16rem;
            left:0.14rem;
            width:0.2rem;
            height:0.28rem;
        }
        .inf{
            width:1.84rem;
            margin:0.2rem auto;
            font-size: 14px;
        }
        .inf .text{
            font-size: 14px;
            text-align: center;
        }
        .inf .tou{
            margin:0 auto;
            width:0.8rem;
        }
        .inf img{
            width:0.8rem;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="top">忘记密码</div>
    <div class="inf">
        <div class="tou"><img src="images/touxiang.png" /></div><br />
        <span class="text">验证码以发送到绑定手机号码</span><br /><br />
        <span id="telphone">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;136****1830</span>
    </div>
    <div class="content">
        <input placeholder="请输入验证码" id="yzm" /><span id="yzmerror"></span><span class="res">重新发送</span>
    </div>
    <div class="next"><a href="forget3.html"><input type="button" value="下一步" disabled id="submitBtn" /></a></div>
    <div class="img"><a href="forget.html"><img src="images/return.png"></a></div>
</div>

<script>
    var codeReg =/^[0-9]{6}$/;

    var a=localStorage.getItem("phone");
    console.log(a);
    var telphone = document.getElementById("telphone");
    telphone.innerHTML=a;

    yzm.onkeyup = function(){
        var yzmValue = yzm.value;
        if(yzmValue.length==0){
            yzmerror.innerHTML= "请填写验证码!";
            isYZMRight=false;
            checkAll();
            return;
        }
        if(!codeReg.test(yzmValue)){
            yzmerror.innerHTML="验证码格式错误！";
            isYZMRight = false;
            checkAll();
            return;
        }
        $.ajax({
            url:"http://test.hfjava.com/shop/yzm",
            dataType:"jsonp",
            success:function(data){
                if(data.code!=yzmValue){
                    yzmerror.innerHTML="验证码错误！";
                    isYZMRight = false;
                }else{
                    yzmerror.innerHTML = "<img src='images/dui.png' style='width:14px'/>";
                    isYZMRight = true;
                }
                checkAll();
            }
        });
    };


    function checkAll(){
        var isRight =isYZMRight;
        if(isRight) {
            submitBtn.removeAttribute("disabled");
            submitBtn.style.background="#1a65e6";
            submitBtn.style.color="#fff";
        }else{
            submitBtn.setAttribute("disabled","disabled");
        }
    }

</script>
</body>
</html>